/*
* 模块描述：元素居中（垂直方向）处理样式
* 模块兼容：Chrome（latest-1）、Firefox（latest-1）、Explorer（6+）
* 模块作者：@iyoole
* 更新时间：2017-01-23
*/

.middle(@width, @height) {
    position: absolute;
    top: 50%;
    left: 50%;

    margin-top: (@height / 2) * -1;
    margin-left: (@width / 2) * -1;

    height: @height;
    width: @width;
}

// Explorer（9+）
.middle-transform() {
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}

// Explorer（8+）
.middle-table() {
    display: table;
    width: 100%;
    height: 100%;

    &-container {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
}

@font_gray: #a0a0a0;
@font_gray2: #e9e9e9;
@font_blue: #7998f0;
@blue2: #2999f7;
@blue3: #4dc2f7;
@yellow: #ffeb3b;
@orange: #fca301;

.wordHidden() {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wordHidden_2() {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.bord_bottom(@l) {
    &:before {
        content: "";
        position: absolute;
        left: @l;
        bottom: 0;
        width: 100%;
        height: 1px;
        background-color: #d8d8d8;
    }
    &:last-child:before {
        display: none;
    }
}

.bord_top() {
    &:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 1px;
        background-color: #d8d8d8;
    }
}

.flex-display() {
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
}

.flex-size(@size) {
    flex: @size;
    -webkit-box-flex: @size;
    -webkit-flex: @size;
    -ms-flex: @size;
}

.flex-vertical() {
    flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
}

.flex-row() {
    flex-direction: row;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
}

.flex-align-center() {
    align-items: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
}

.flex-pack-center() {
    justify-content: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
}

.transForm(@content) {
    transform: @content;
    -webkit-transform: @content;
    -ms-transform: @content;
}
// 使用示例
// ----------------------------
// .example { .middle(100px, 200px); }
// .example { .middle-transform(); }
// .example { .middle-table(); }

// 参考文献
// ----------------------------
// http://caniuse.com/#feat=transforms2d
// http://caniuse.com/#feat=css-table
